<script setup>
import 'leaflet/dist/leaflet.css'
import '@supermap/iclient-leaflet/css/index'

import iServerConfigUrl from '/iServerConfig.json?url'

import { ElMessage } from 'element-plus'
import $ from 'jquery'

import L from 'leaflet'
import '@supermap/iclient-leaflet'
import 'proj4leaflet'
import 'leaflet-draw'

import { inject } from 'vue'
import axios from 'axios'
</script>

<template></template>

<script>
export default {
    name: 'Measurement',
    data() {
        return {
            restMapUrl: undefined,
            otherLayers: []
        }
    },
    mounted() {
        var map = inject('map');
        var drawControl = inject('drawControl');
        var editableLayers = inject('editableLayers');

        axios.get(iServerConfigUrl).then(res => {
            var iServerConfig = res.data;
            this.restMapUrl = `${iServerConfig.urls.Measurement.protocol}://${iServerConfig.urls.Measurement.hostname}:${iServerConfig.urls.Measurement.port}/${iServerConfig.urls.Measurement.restMapUrl}`;

            // 还原 map 显示范围
            if (map._size.x !== document.body.clientWidth) {
                $("#map")[0].style.width = '';
                map._size.x = document.body.clientWidth;
            }

            map.options.crs = L.CRS.EPSG4326;;
            map.flyTo([35.12, 108.48], 4);

            // 添加底图
            new L.supermap.tiledMapLayer(this.restMapUrl).addTo(map);

            // 添加绘制控件
            map.addLayer(editableLayers);
            map.addControl(drawControl);

            // 线绘制结束添加到图层显示
            map.on(L.Draw.Event.CREATED, e => {
                editableLayers.addLayer(e.layer);
                e.layer.markerLayers = this.otherLayers;
                this.otherLayers = [];
            });

            // 地图量算
            map.on(L.Draw.Event.DRAWVERTEX, e => {
                var editLayers = e.layers.getLayers();
                if (this.otherLayers.length > editLayers.length) {
                    this.otherLayers[this.otherLayers.length - 1].remove();
                    this.otherLayers = this.otherLayers.slice(0, this.otherLayers.length - 1);
                } else {
                    var currentDistance = $('.leaflet-draw-tooltip-subtext').text();
                    var layers = e.layers._layers;
                    var layerKeys = Object.keys(layers);
                    var layerKey = layerKeys[layerKeys.length - 1];
                    if (Object.hasOwnProperty.call(layers, layerKey)) {
                        const layer = layers[layerKey];
                        var latlng = layer._latlng;

                        if (currentDistance === '') {
                            currentDistance = '起点';
                        }

                        let icon = L.divIcon({
                            html: `<span style="background-color: aliceblue; padding: 2px 4px; border-radius: 5px; border: 1px solid #FFFFFF">${currentDistance}</span>`,
                            iconSize: [80, 20],
                            iconAnchor: [40, 24],
                            labelAnchor: [0, 0],
                            className: ''
                        });
                        var marker = new L.marker(latlng, {
                            icon: icon
                        });

                        marker.addTo(map);
                        this.otherLayers[this.otherLayers.length] = marker;
                    }
                }
            });

            // 删除地图量算的数据
            map.on(L.Draw.Event.DELETED, e => {
                var deletedLayers = e.layers.getLayers();
                if (deletedLayers !== undefined && deletedLayers.length > 0) {
                    for (let i = 0; i < deletedLayers.length; i++) {
                        const deletedLayer = deletedLayers[i];
                        var markerLayers = deletedLayer.markerLayers;
                        if (markerLayers !== undefined && markerLayers.length > 0) {
                            for (let j = 0; j < markerLayers.length; j++) {
                                const markerLayer = markerLayers[j];
                                markerLayer.remove();
                            }
                        }
                    }
                }
            });

            // 测距过程中取消
            map.on(L.Draw.Event.DRAWSTOP, e => {
                if (this.otherLayers.length > 0) {
                    for (let i = 0; i < this.otherLayers.length; i++) {
                        const otherLayer = this.otherLayers[i];
                        otherLayer.remove();
                    }
                    this.otherLayers = [];
                }
            });
        }).catch(err => {
            ElMessage.error(err.stack);
        });
    },
    methods: {
    }
}
</script>

<style scoped></style>